<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>苏苏音乐</title>
  <link rel="stylesheet" href="body.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4785143_cbjy17lq3c.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.8/axios.js"></script>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="footer.css">
  <link rel="stylesheet" href="ranklist.css">
  <link rel="stylesheet" href="/music-item/font_ajhxcvgljcu/iconfont.css">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 <!-- 添加axios库 -->
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <!-- 头部导航栏 -->
  <div class="header">
    <!-- 版心 -->
    <div class="header-container clearfix">
      <div class="header-logo leftfix">
        <img src="./img/music_logo.png" alt="网易云音乐logo">
      </div>
      <!-- 选择栏 -->
      <div class="header_choose leftfix">
        <ul class="clearfix">
          <li class="one leftfix">发现音乐</li>
          <li class="two leftfix">我的音乐</li>
          <li class="three leftfix">关注</li>
          <li class="four leftfix">商城</li>
          <li class="five leftfix">音乐人</li>
          <li class="six leftfix">云推歌</li>
          <li class="seven leftfix">下载客户端</li>
        </ul>
      </div>
      <!-- 搜索框 -->
      <div class="search leftfix clearfix music_search">
        <img class="leftfix sousuo" src="./img/search.png" alt="搜索">
        <input id="searchInput" type="text" class="search-box leftfix searchinput" placeholder="音乐/视频/电台/用户">
        <div id="searchResults"></div>
      </div>
      <!-- 创作者中心 -->
      <button class="center leftfix">
        创作者中心
      </button>
       <!-- 登录 -->
      <div class="login leftfix">
        登录
      </div>
    </div>
  </div>





  <!-- 验证码登录界面 -->
  <div class="user-login">
    <!-- 头部 -->
    <div class="login-head clearfix">
      <!-- 头部左侧文字 -->
      <div class="character leftfix">
        手机号注册
      </div>
      <!-- 关闭按钮 -->
      <div class="close rightfix">
        <span class="close-btn">×</span>
      </div>
    </div>
    <!-- 中间 -->
    <div class="login-content">
      <!-- 输入手机号 -->
      <div class="phone-number clearfix">
        <!-- 选择手机号方式 -->
        <div class="phone-select leftfix">
          +86&nbsp
          <img src="./img/07dcdb891bd550ab2f503ca7613f5239.png" alt="">
        </div>
        <!-- 输入框 -->
        <input type="text" class="input-phone leftfix" placeholder="请输入手机号">
      </div>

      <!-- 选择手机号 -->
      <div class="choooose">
        <div class="c86">中国大陆 +86</div>
        <div class="c886">中国台湾 +886</div>
        <div class="c852">中国香港 +852</div>
        <div class="c853">中国澳门 +853</div>
        <div class="c60">马来西亚 +60</div>
        <div class="c65">新加坡 +65</div>
        <div class="c81">日本 +81</div>
        <div class="c82">韩国 +82</div>
        <div class="c1">美国 +1</div>
        <div class="c1">加拿大 +1</div>
        <div class="c61">澳大利亚 +61</div>
        <div class="c64">新西兰 +64</div>
        <div class="c247">阿森松岛 +247</div>
        <div class="c355">阿尔巴尼亚 +355</div>
        <div class="c213">阿尔及利亚 +213</div>
      </div>


      <!-- 设置密码 -->
      <div class="user-password">
        <input class="input-userpwd" type="password" placeholder="设置密码">
      </div>
      <!-- 输入验证码 + 获取验证码 -->
       <div class="captcha clearfix">
        <div class="captcha-input leftfix">
          <input type="text" class="captcha-box leftfix" placeholder="请输入短信验证码">
        </div>
        <div class="captcha-get rightfix">获取验证码</div>
       </div>
      <!-- 报错提醒 -->
      <div class="err">
        
      </div>
      <!-- 登录按钮 -->
      <div class="captcha-login">注册</div>
      <!-- 密码登录 -->
      <div class="shift-pwd-login"><a href="#">密码登录</a></div>
    </div>
    <!-- 底部 -->
     <div class="login-bottom">
      <div class="other"><a href="#" style="color: #0c72c3;"><&nbsp;&nbsp;其他登录方式</a></div>
     </div>
  </div>
  <!-- 密码登录界面 -->
  <div class="pwd-login">
    <!-- 头部 -->
     <div class="pwd-head">
      <!-- 头部左侧文字 -->
      <div class="character leftfix">
        手机号登录
      </div>
      <!-- 关闭按钮 -->
      <div class="close rightfix">
        <span class="close-btn">×</span>
      </div>
     </div>
    <!-- 中间 -->
     <div class="pwd-center">
      <!-- 输入手机号 -->
      <div class="pwd-number clearfix">
        <!-- 选择手机号方式 -->
        <div class="choose leftfix">
          +86
          <img src="./img/07dcdb891bd550ab2f503ca7613f5239.png" alt="">
        </div>
      <!-- 选择手机号 -->
      <div class="choooose">
        <div class="c86">中国大陆 +86</div>
        <div class="c886">中国台湾 +886</div>
        <div class="c852">中国香港 +852</div>
        <div class="c853">中国澳门 +853</div>
        <div class="c60">马来西亚 +60</div>
        <div class="c65">新加坡 +65</div>
        <div class="c81">日本 +81</div>
        <div class="c82">韩国 +82</div>
        <div class="c1">美国 +1</div>
        <div class="c1">加拿大 +1</div>
        <div class="c61">澳大利亚 +61</div>
        <div class="c64">新西兰 +64</div>
        <div class="c247">阿森松岛 +247</div>
        <div class="c355">阿尔巴尼亚 +355</div>
        <div class="c213">阿尔及利亚 +213</div>
      </div>
        <!-- 输入框 -->
        <div class="input leftfix">
          <input type="text" placeholder="请输入手机号">
        </div>
      </div>
      <!-- 输入密码 -->
      <div class="pwd-pwd clearfix">
        <!-- 输入框 -->
        <div class="leftfix pwd-input">
          <input type="password" placeholder="请输入密码">
        </div>
        <!-- 忘记密码 -->
         <div class="forget rightfix">
          <a href="#">忘记密码?</a>
         </div>
      </div>
      <!-- 输入格式错误 -->
      <div class="error">
      </div>
      <!-- 短信登录&自动登录 -->
      <div class="sdv clearfix">
        <!-- 短信登录 -->
         <div class="message leftfix">
          短信登录
         </div>
        <!-- 自动登录 -->
         <div class="auto leftfix">
          <input type="checkbox" class="leftfix">&nbsp自动登录
         </div>
      </div>
      <!-- 登录按钮 -->
      <div class="pwd-login-btn">
        登录
      </div>
     </div>
    <!-- 底部 -->
     <div class="pwd-bottom">
      &lt&nbsp&nbsp其他登录方式
     </div>
  </div>
  
  





















  <div class="nav-top">
    <div class="container01">
      <button class="keyone bt">推荐</button>
      <button class="keytwo bt">排行榜</button>
      <button class="keythree bt">歌单</button>
      <button class="keyfour bt">主播电台</button>
      <button class="keyfive bt">歌手</button>
      <button class="keysix bt">新碟上架</button>
    </div>
  </div>

<script>
  //鼠标经过事件
  let navtop = document.getElementsByClassName("nav-top")[0]; // 通过 class 获取元素
  navtop.onmouseover = function() {
    this.style.cursor = "pointer";
  };
  navtop.onmouseout = function() {
    this.style.cursor = "default";
  };

  let bt = document.getElementsByClassName("bt");
  for(let i=0;i<bt.length;i++){
    bt[i].onmouseover = function() {
    this.style.cursor = "pointer";
    this.style.backgroundColor = "#9B0909"
  };
    bt[i].onmouseout = function() {
    this.style.cursor = "default";
    this.style.backgroundColor = "transparent";
  };
  }
</script>

<div class="container">

  <div class="partone">
        <div class="box moveimage">
        <div class="imglist">
            <!-- 图片将通过JS动态插入 -->
            <div class="loading">加载中...</div>
        </div>
        <div class="leftbtn">&lt;</div>
        <div class="rightbtn">&gt;</div>
        <div class="btnlist">
            <!-- 圆点按钮将通过JS动态生成 -->
        </div>
    </div>

    <div class="hotsug allbox">
      <div class="hotsugword">
        <div class="hotword1"><div class="poi"></div>热门推荐</div>
        <div class="hotword2">
          <span class="bor">华语</span>
          <span class="bor">流行</span>
          <span class="bor">摇滚</span>
          <span class="bor">民谣</span>
          <span class="bor bor-active">电子</span>
        </div>
        <span class="mor">更多</span>
        <span class="morwith">→</span>
      </div>
      <hr>
      <div class="listaya">
        <!--<div class="itemaya">
          <img src="" alt="">
          <div class="playnum">
            <i class="iconfont icon-erji"></i>
            3929万&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <i class="iconfont icon-bofangjian-"></i>
          </div>
          <p class="desc">世界级古典钢琴曲音乐珍藏</p>
        </div>                              -->
      </div>
    </div>
      <div class="newpub allbox">
        <div class="newpubword">
          <div class="newword1"><div class="poi"></div>新碟上架</div>
          <span class="mor mor2">更多</span>
          <span class="morwith morwith2">→</span>
        </div>
        <hr>
        <div class="listaya2">
          <!-- <div class="itemaya2"> -->
            <!-- <img src="" alt=""> -->
            <!-- <p class="nameya">出人头地啊呀啊呀啊呀啊呀</p> -->
            <!-- <p class="authorya">QOXNBUDBBDUCPSOCBFBHFJV</p> -->
          <!-- </div> -->
        </div>
      </div>
      <div class="molist allbox">
        <div class="molistword">
          <div class="molword1"><div class="poi"></div>榜单</div>
          <span class="mor mor2 mor3">更多</span>
          <span class="morwith morwith2 morwith3">→</span>
        </div>
        <hr>
        <table>
          <!--<tr>
            <td class="hoster">
              <div class="rgbya rgb1"></div>
              <p>飙升榜</p>
            </td>
            <td class="hoster">
              <div class="rgbya rgb2"></div>
              <p>新歌榜</p>
            </td>
            <td class="hoster">
              <div class="rgbya rgb3"></div>
              <p>原创榜</p>
            </td>
          </tr>-->
          <!--<tr>
            <td>
              <span>
                <p>祝你爱我到天荒地老</p>
                <i class="iconfont icon-erji"></i>
                <i class="iconfont icon-erji"></i>
                <i class="iconfont icon-erji"></i>   
              </span>
            </td>
            <td>
              <span>
                <p>像晴天像雨天</p>
                <i class="iconfont icon-erji"></i>
                <i class="iconfont icon-erji"></i>
                <i class="iconfont icon-erji"></i>       
              </span>
            </td>
            <td>
              <span>
                <i>乱世太平</i>
                <i class="iconfont icon-erji"></i>
                <i class="iconfont icon-erji"></i>
                <i class="iconfont icon-erji"></i>       
              </span>
            </td>
          </tr>-->
        </table>
      </div>
  </div>

  <div class="parttwo">
    <!-- <div class="lyftoptoptop"> -->

         <!-- <div></div> -->
         <!-- <div id="lyfrankbtn">排行榜</div> -->
         <!-- <div></div> -->
         <!-- <div></div> -->
         <!-- <div></div> -->
         <!-- <div></div> -->
    <!-- </div> -->
   
    <div class="lyfrank_background">
        <div class="lyfrank_top">
            <img class="lyfrank_top_picture" title="飙升榜">
            <div class="lyfrank_top_details">
                <font class="lyftitle">飙升榜</font>
                <font class="lyfline1"></font>
                <div class="lyfrank_top_btns1">
                    <button>播放</button>
                    <button>+</button>
                </div>
                <div class="lyfrank_top_btns2">
                    <button id="lyfcollect"></button>
                    <button id="lyfforward"></button>
                    <button>下载</button>
                    <button id="lyfcomment"></button>
                </div>
            </div>
        </div>

        <div class="lyfsongsList">
            <span class="lyfsongslist1">歌曲列表</span>
            <span class="lyfsongslist2"></span>
            <span class="lyfsongslist3">播放：<span class="lyfsongslist3_times">222</span> 次</span>
            <div class="lyfsongsContent">
                <div class="lyfsongsContent_line1">
                    <div id="lyftitle_1"></div>
                    <div id="lyftitle_2">标题</div>
                    <div id="lyftitle_3">时长</div>
                    <div id="lyftitle_4">歌手</div>
                </div>
                <div class="lyfssssongs">
                    <div class="lyftop1">
                        <div class="lyfnumberOfSongs">1</div>
                        <div class="lyfimgOfSongs"><img class="lyftop1_1" src="./img/芙莉莲.jpg"></div>
                        <div class="lyfnameOfSongs1"></div>
                        <div class="lyfdurationOfSongs"></div>
                        <div class="lyfsingerOfSongs"></div>
                    </div>
                    <div class="lyftop2">
                        <div class="lyfnumberOfSongs">2</div>
                        <div class="lyfimgOfSongs"><img class="lyftop1_1" src="./img/章鱼哥.jpg"></div>
                        <div class="lyfnameOfSongs1"></div>
                        <div class="lyfdurationOfSongs"></div>
                        <div class="lyfsingerOfSongs"></div>
                    </div>
                    <div class="lyftop3">
                        <div class="lyfnumberOfSongs">3</div>
                        <div class="lyfimgOfSongs"><img class="lyftop1_1" src="./img/派大星.jpg"></div>
                        <div class="lyfnameOfSongs1"></div>
                        <div class="lyfdurationOfSongs"></div>
                        <div class="lyfsingerOfSongs"></div>
                    </div>
                    <div id="lyfsongsStyle"></div>
                </div>
            </div>
        </div>
    </div>
  </div>

   <div class="partthree">
   <div class="bd-container">
     <div class="u-title">
      <h3>
        <span class="f-ff2">全部歌曲</span>
        <a href="javascript:;" class="u-btn2 u-btn2-1 menu d-flag">
          <select name="xzfl" id="">
            <option value="" disabled selected style="color: rgb(47, 117, 180);">选择分类</option>

          </select>

        </a>
      </h3>

       <div class="u-btn f-fr u-btn-hot d-flag">
         <a href="" class="a1">热门</a>
       </div>
     </div>
     <ul class="m-cvrlst" id="m-pl-container"></ul>
     <div class="pager">
       <div class="u-page">
         <button id="prev-page" disabled>上一页</button>
         <span id="page-info"></span>
         <button id="next-page">下一页</button>
       </div>
     </div>
   </div>
 </div>

</div>

  <div class="footer">
      <div>
        <!-- <a href=""> -->
          <button class="backToTop" style="display: none;"><div class="arrow"></div>TOP</button>
        <!-- </a> -->
    </div>

    <center><div class="lyfBottom">
        <a href="">服务条款</a>&nbsp;|&nbsp;<a href="">隐私政策</a>&nbsp;|&nbsp;<a href="">儿童隐私政策</a>&nbsp;|&nbsp;<a href="">版权投诉</a>&nbsp;|&nbsp;<a href="">投资者关系</a>&nbsp;|&nbsp;<a href="">广告合作</a>&nbsp;|&nbsp;<a href="">联系我们</a>
        <br>
        <a href="">廉正举报</a>&nbsp;&nbsp;&nbsp;不良信息举报邮箱: 51jubao@service.netease.com 客服热线：95163298
        <br>
        互联网宗教信息服务许可证：浙（2022）0000120 增值电信业务经营许可证：浙B2-20150198 粤B2-20090191-18  工业和信息化部备案管理系统网站
        <br>
        网易公司版权所有©1997-2025杭州乐读科技有限公司运营：浙网文[2024] 0900-042号  浙公网安备 33010802013307号 算法服务公示信息
    </div></center>

  </div>
  <div class="bottomplay">
      <div class="music-player" title="展开播放条">
        <div class="audio-player">
          <!-- 在HTML的audio-player部分添加audio元素 -->
          <audio id="main-audio" src=""></audio>
          <div class="icon three-play">
            <a class="iconfont white">&#xe6a5;
            </a>
            <a class="iconfont white">&#xe65c;</a>
            <a class="iconfont white">&#xe6aa;
            </a>
          </div>
          <div class="yinfu">
            <img src="/music-item/img/微信图片_20250315211314.png" style="width: 30px; position: relative; top: 6px;" alt="">
          </div>
          <div class="progress-track">
            <div class="progress-bar" style="width: 0;"></div>
            <input type="range" min="0" max="100" value="0">
          </div>

          <div class="time-display">00:00 / 00:00</div>
          <div class="right">
            <a href="" class="iconfont white">&#xe624;
            </a>
            <a href="" class="iconfont white">&#xe558;</a>
            <a href="" class="iconfont white">&#xe643;</a>

            <span>
              <button class="iconfont white shu-player">&#xeca5;</button>
              <!-- <span class="volume-slider">
                  <span class="volume-track">
                      <span class="volume-thumb"></span>
                  </span> -->
              <input type="range" id="volume-input" min="0" max="100" value="100">
              <span id="volume-value">100%</span>
            </span>
            </span>
            <span class="iconfont white">&#xe622;</span>
            <span class="last-play">音质</span>
          </div>
        </div>
      </div>
    </div>
  
<script>
  
axios.defaults.baseURL='http://e6dz54.natappfree.cc'
let baseURL='http://e6dz54.natappfree.cc'
  let keyone=document.querySelector('.keyone')
  let keytwo=document.querySelector('.keytwo')
  let keythree=document.querySelector('.keythree')
  let partone=document.querySelector('.partone')
  let parttwo=document.querySelector('.parttwo')
  let partthree=document.querySelector('.partthree')
  keyone.addEventListener('click',function(){
    parttwo.style.display='none'
    partthree.style.display='none'
    partone.style.display='block'

    
  })
  keytwo.addEventListener('click',function(){
  partone.style.display='none'
  partthree.style.display='none'
  parttwo.style.display='block'

  
})
keythree.addEventListener('click',function(){
  parttwo.style.display='none'
  partone.style.display='none'
  partthree.style.display='block'

  
})

let currentPage = 1;
    const pageSize = 15;
    let totalSongs = 0;
    let allSongs = [];

    async function fetchChartData() {
      try {
        const response = await axios.get(`/songList`);
     
        allSongs = response.data.data;
        totalSongs = allSongs.length;
        renderPage(currentPage);

      } catch (error) {
        console.error('请求失败:', error.message);
      }
    }

    function renderPage(page) {
      const startIndex = (page - 1) * pageSize;
      const endIndex = startIndex + pageSize;
      const currentSongs = allSongs.slice(startIndex, endIndex);
      const ul = document.getElementById('m-pl-container');
      ul.innerHTML = '';

      currentSongs.forEach(song => {
        const li = document.createElement('li');
        li.innerHTML = `
          <div class="u-cover u-cover-1">
            <img src="${song.picture || 'placeholder.jpg'}" alt="${song.title}">
            <div class="bottom">
              <span class="icon-headset iconfont">&#xe665;</span>
              <span class="nb">${song.accmount}</span>
              <a href="" title="播放" class="iconfont icon-play f-fr">&#xe65c;</a>
            </div>
          </div>
          <p class="dec">
            <a href="" title="${song.title}">${song.title}</a>
            </p>
          <p class="nm">
            <span class="s-fc4"">by</span>
            <a href="" title="${song.author}">${song.author}</a>
            </p>
        `;
        ul.appendChild(li);
      });

      const totalPages = Math.ceil(totalSongs / pageSize);
      const spanpageinfo = document.getElementById('page-info');
      spanpageinfo.innerHTML = '';

      for (let i = 0; i < totalPages; i++) {
        const newSpan = document.createElement('span');
        newSpan.innerHTML = `${i + 1}`;
        newSpan.id = `${i + 1}`;
        newSpan.className = 'Pages';
        spanpageinfo.appendChild(newSpan);
      }

      const spanPages = document.querySelectorAll('.Pages');
      spanPages.forEach(span => {
        span.addEventListener('click', function () {
          currentPage = Number(this.id);
          renderPage(currentPage);
        });
      });

      document.getElementById('prev-page').disabled = page === 1;
      document.getElementById('next-page').disabled = page === totalPages;
    }

    // 分页按钮事件
    document.getElementById('prev-page').addEventListener('click', () => {
      if (currentPage > 1) {
        currentPage--;
        renderPage(currentPage);
      }
    });

    document.getElementById('next-page').addEventListener('click', () => {
      const totalPages = Math.ceil(totalSongs / pageSize);
      if (currentPage < totalPages) {
        currentPage++;
        renderPage(currentPage);
      }
    });
    let currentSpan = document.getElementById(String(currentPage));
    if (currentSpan) {
      currentSpan.style.background = 'linear-gradient(to top , rgb(168,9,9), rgb(210,12,13))';
      currentSpan.style.color = '#fff';
    }

    fetchChartData();
    const progressInput = document.querySelector('input[type="range"]');
    const progressBar = document.querySelector('.progress-bar');
  // 监听滑块变化（可扩展实际播放逻辑）
    progressInput.addEventListener('input', (e) => {
      const value = e.target.value;
      progressBar.style.width = `${value}%`;
    });


          const musicPlayer = document.querySelector('.music-player');
          const threshold = 50;
          let isPlayerHover = false;
  
          // 播放条显示隐藏
          window.addEventListener('mousemove', (e) => {
              const windowHeight = window.innerHeight;
              if (e.clientY > windowHeight - threshold || isPlayerHover) {
                  musicPlayer.style.transform = 'translateY(0)';
              } else {
                  musicPlayer.style.transform = 'translateY(100%)';
              }
          });
          musicPlayer.addEventListener('mouseenter', () => isPlayerHover = true);
          musicPlayer.addEventListener('mouseleave', () => isPlayerHover = false);
  
     
    const volumeInput = document.getElementById('volume-input');
    const volumeValue = document.getElementById('volume-value');
    const muteButton = document.querySelector('.shu-player');
    let isMuted = false;
    let currentVolume = 100;

    // 更新音量显示
    function updateVolumeDisplay(volume) {
      volumeValue.textContent = `${volume}%`;
      volumeInput.value = volume;
    }

    // 处理音量滑块变化
    volumeInput.addEventListener('input', (e) => {
      currentVolume = parseInt(e.target.value);
      updateVolumeDisplay(currentVolume);
    
    });
    let showvolumevalue = 0;
    function showvolume(showvolumevalue) {
      if (showvolumevalue === 1)
        volumeInput.style.display = 'block';
      else {
        volumeInput.style.display = 'none';
      }
    }
    // 处理静音按钮点击
    muteButton.addEventListener('click', () => {
      if (showvolumevalue === 0) {
        showvolumevalue = 1;
        showvolume(showvolumevalue);
      } else if (showvolumevalue === 1) {
        showvolumevalue = 0;
        showvolume(showvolumevalue);
      }
      if (isMuted) {
        updateVolumeDisplay(currentVolume);

        isMuted = false;
      } else {
        updateVolumeDisplay(0);
        isMuted = true;
      }
    });

    // 初始化音量显示
    updateVolumeDisplay(currentVolume);


//*******头部导航栏的js部分********

//点击登录按钮弹出验证码界面
document.querySelector('.header-container .login').addEventListener('click', () => {
  document.querySelector('.user-login').style.display = 'block'
})
//关闭验证码界面按钮
document.querySelector('.user-login .close').addEventListener('click', () => {

document.querySelector('.user-login').style.display = 'none'
})
//点击密码登录按钮弹出密码登录界面
document.querySelector('.shift-pwd-login').addEventListener('click', () => {
  document.querySelector('.user-login').style.display = 'none'
  document.querySelector('.pwd-login').style.display = 'block'
})
//关闭密码登录界面按钮
document.querySelector('.pwd-login .close-btn').addEventListener('click', () => {
  document.querySelector('.pwd-login').style.display = 'none'
})
//点击选择手机号弹出下拉框(验证码)
document.querySelector('.user-login .phone-select').addEventListener('click', () => {
  if (document.querySelector('.user-login .choooose').style.display == 'block') {
    document.querySelector('.user-login .choooose').style.display = 'none'
  } else {
    document.querySelector('.user-login .choooose').style.display = 'block'
  }
})
//点击选择手机号弹出下拉框(密码)
document.querySelector('.pwd-center .choose').addEventListener('click', () => {
  if (document.querySelector('.pwd-center .choooose').style.display == 'block') {
    document.querySelector('.pwd-center .choooose').style.display = 'none'
  } else {
    document.querySelector('.pwd-center .choooose').style.display = 'block'
  }
})
//******验证码下拉框******
const parent1 = document.querySelector('.user-login .choooose')
const children1 = parent1.children
for (let child1 of children1) {
  child1.addEventListener('click', function(event) {
  const c1 = event.target.className
  const d1 = c1.slice(1)
  console.log('1')
  document.querySelector('.user-login .phone-select').innerHTML = `+${d1} <img src="./img/07dcdb891bd550ab2f503ca7613f5239.png">`
  document.querySelector('.user-login .choooose').style.display = 'none'
  });
}
//******密码下拉框******
const parent2 = document.querySelector('.pwd-login .choooose')
const children2 = parent2.children
for (let child2 of children2) {
  child2.addEventListener('click', function(event) {
  const c2 = event.target.className
  const d2 = c2.slice(1)
  console.log('1')
  document.querySelector('.pwd-login .choose').innerHTML = `+${d2} <img src="./img/07dcdb891bd550ab2f503ca7613f5239.png">`
  document.querySelector('.pwd-login .choooose').style.display = 'none'
  });
}



//****密码登录****//
document.querySelector('.pwd-login .pwd-login-btn').addEventListener('click', () => {
  const phone_number = document.querySelector('.pwd-login .input input').value
  const password = document.querySelector('.pwd-login .pwd-input input').value
  //console.log(phone_number, password)
  //判断手机号是否为空
  if (phone_number.length == 0) {
    document.querySelector('.pwd-login .error').innerHTML = '<img src="./img/345c2fd2c623013494cbc72715ad8e1c.png" alt="错误">&nbsp请输入手机号'
    document.querySelector('.pwd-login .error').style.color = '#d2463b'
    document.querySelector('.pwd-login .error').style.display = 'block'
    return
  }
  //判断手机号是否为11位
  else if (phone_number.length < 11) {
    document.querySelector('.pwd-login .error').innerHTML = '<img src="./img/345c2fd2c623013494cbc72715ad8e1c.png" alt="错误">&nbsp请输入正确的手机号'
    document.querySelector('.pwd-login .error').style.color = '#d2463b'
    document.querySelector('.pwd-login .error').style.display = 'block'
    return
  }
  //判断密码是否为空
  else if (password.length == 0) {
    document.querySelector('.pwd-login .error').innerHTML = '<img src="./img/345c2fd2c623013494cbc72715ad8e1c.png" alt="错误">&nbsp请输入登录密码'
    document.querySelector('.pwd-login .error').style.color = '#d2463b'
    document.querySelector('.pwd-login .error').style.display = 'block'
    return
  }
  //axios请求登录接口
  axios({
    url: `${baseURL}/user/login`,
    method: 'POST',
    data: {
      email: phone_number,
      password: password
    }
  }).then(result => {
    if (result.data.msg === '执行成功') {
      document.querySelector('.pwd-login .error').innerHTML = '<img src="./img/a466a8558799c58ae605589a5df550c4.png" alt="成功">&nbsp登录成功'
      document.querySelector('.pwd-login .error').style.color = '#1f96fe'
      document.querySelector('.pwd-login .error').style.display = 'block'
    }
    else if (result.data.msg === '密码错误') {
      document.querySelector('.pwd-login .error').innerHTML = '<img src="./img/345c2fd2c623013494cbc72715ad8e1c.png" alt="错误">&nbsp账号或密码错误'
      document.querySelector('.pwd-login .error').style.color = '#d2463b'
      document.querySelector('.pwd-login .error').style.display = 'block'
    }
  }).catch(error => {
    console.log(error)
  })
})





//****验证码登录****//
document.querySelector('.captcha-get').addEventListener('click', () => {
  const number = document.querySelector('.input-phone').value
  const captcha = document.querySelector('.captcha-box').value
  const user_password = document.querySelector('.user-login .input-userpwd').value
  const captcha_btn = document.querySelector('.captcha-get')
  //报错提醒
  //手机号不能为空
  if (number.length == 0) {
    document.querySelector('.user-login .err').innerHTML = '<img src="./img/ec343943e55f1d8501d9b045a3655239.png" alt="错误">&nbsp请输入手机号'
    document.querySelector('.user-login .err').style.color = '#e96860'
    document.querySelector('.user-login .err').style.display = 'block'
  }
  //手机号格式错误
  else if (number.length < 11) {
    document.querySelector('.user-login .err').innerHTML = '<img src="./img/ec343943e55f1d8501d9b045a3655239.png" alt="错误">&nbsp手机号码格式错误，请更换后重试'
    document.querySelector('.user-login .err').style.color = '#e96860'
    document.querySelector('.user-login .err').style.display = 'block'
  }
  //设置的密码不能为空
  else if (user_password.length == 0) {
    document.querySelector('.user-login .err').innerHTML = '<img src="./img/ec343943e55f1d8501d9b045a3655239.png" alt="错误">&nbsp请设置登录密码'
    document.querySelector('.user-login .err').style.color = '#e96860'
    document.querySelector('.user-login .err').style.display = 'block'
  }
  else {
    //axois请求验证码
    document.querySelector('.captcha-get').classList.add('disabled')
    queryString = 'email=' + number + '&password=' + user_password
    axios.get('/user/captcha' + '?' + queryString, {
      method: 'GET',
      timeout: 5000
    }).then(result => {
      console.log(result)
      window.hcode = result.data.data
      console.log(window.hcode)
    })
    document.querySelector('.user-login .err').style.display = 'none'
    let i = 30
    const captcha_time = setInterval(() => {
    captcha_btn.innerHTML = `${i}秒后重发`
    captcha_btn.style.backgroundColor = '#dddddd'
    captcha_btn.style.color = '#999999'
    i--
    if (i == -1) {
      clearInterval(captcha_time)
      captcha_btn.innerHTML = '获取验证码'
      captcha_btn.style.backgroundColor = '#ed5043'
      captcha_btn.style.color = 'white'
      document.querySelector('.captcha-get').classList.remove('disabled')
    }
  }, 1000)
  }
})
document.querySelector('.captcha-login').addEventListener('click', () => {
  const number = document.querySelector('.input-phone').value
  const captcha = document.querySelector('.captcha-box').value
  const user_password = document.querySelector('.user-login .input-userpwd').value
  axios({
    url: `${baseURL}/user/register`,
    method: 'POST',
    data: {
      email: number,
      password: user_password,
      code: captcha,
      hcode: window.hcode
    }
  }).then(result => {
    console.log(result)
    if (result.data.msg === '执行成功') {
      document.querySelector('.user-login .err').innerHTML = '<img src="./img/a466a8558799c58ae605589a5df550c4.png" alt="成功">&nbsp注册成功'
      document.querySelector('.user-login .err').style.color = '#1f96fe'
      document.querySelector('.user-login .err').style.display = 'block'
    }
    else if (result.data.msg === '用户已存在') {
      document.querySelector('.user-login .err').innerHTML = '<img src="./img/345c2fd2c623013494cbc72715ad8e1c.png" alt="错误">&nbsp用户已存在'
      document.querySelector('.user-login .err').style.color = '#e96860'
      document.querySelector('.user-login .err').style.display = 'block'
    }
    else if (result.data.msg === '验证码不匹配') {
      document.querySelector('.user-login .err').innerHTML = '<img src="./img/345c2fd2c623013494cbc72715ad8e1c.png" alt="错误">&nbsp验证码不匹配'
      document.querySelector('.user-login .err').style.color = '#e96860'
      document.querySelector('.user-login .err').style.display = 'block'
    }
  })
})
  



// axios.defaults.baseURL='http://picnm8.natappfree.cc'
// document.addEventListener('DOMContentLoaded',function(){
  let strya1 =''
  let strya2 =''
  let strya3 =`   
         <tr>
            <td class="hoster">
              <div class="rgbya rgb1"></div>
              <p>飙升榜</p>
              <div class="sgrey"></div>
            </td>
            <td class="hoster">
              <div class="rgbya rgb2"></div>
              <p>新歌榜</p>
              <div class="sgrey"></div>
            </td>
            <td class="hoster">
              <div class="rgbya rgb3"></div>
              <p>原创榜</p>
              <div class="sgrey"></div>
            </td>
          </tr>
          
  `
  axios.get('/home/recommend').then(response=>{
    // console.log(response.data.data);
    let datas=response.data.data//数组对象
    // console.log(datas)
    try{
    datas.forEach(item=>{
      if(item.id===9){
        throw new Error('退出遍历')
      }
      strya1 += `
        <div class="itemaya">
           <img src=${item.imageUrl} alt="">
          <div class="playnum">
            <i class="iconfont icon-erji"></i>
            ${item.amount}
            <i class="iconfont icon-bofangjian- Aya"></i>
          </div>
          <p class="desc">${item.content}</p>
        </div> 
     `
    })}catch(error){
      console.log('捕获异常');
    }
    document.querySelector('.listaya').innerHTML= strya1
    datas.forEach(item=>{
      if(item.id>=12){
        strya2+=`
        <div class="itemaya2">
          <img src=${item.imageUrl} alt="">
          <p class="nameya">${item.content}</p>
          <p class="authorya">${item.extraContent}</p>
        </div>`
      }
    })
     document.querySelector('.listaya2').innerHTML= strya2
  })
// })
  axios.get('/chart').then(response=>{
    // console.log(response.data.data.songs);
    let dataya=response.data.data.songs
    console.log(dataya)
    for(let i=0,j=1;i<=6;i=i+3,j++){
      strya3+=`
      <tr>
        <td><p class="numj numred">${j}</p>&nbsp;&nbsp;${dataya[i].name}</td>
        <td><p class="numj numred">${j}</p>&nbsp;&nbsp;${dataya[i+1].name}</td>
        <td><p class="numj numred">${j}</p>&nbsp;&nbsp;${dataya[i+2].name}</td>
      </tr>
      `
    }
    for(let i=9,j=4;i<=27;i=i+3,j++){
      let saya=i
      i=i%9
      strya3+=`
      <tr>
        <td><p class="numj">${j}</p>&nbsp;&nbsp;${dataya[i].name}</td>
        <td><p class="numj">${j}</p>&nbsp;&nbsp;${dataya[i+1].name}</td>
        <td><p class="numj">${j}</p>&nbsp;&nbsp;${dataya[i+2].name}</td>
      </tr>
      `
      i=saya
    }

    strya3+=` 
    <tr>
      <td class="footerya">查看全部>&nbsp;&nbsp;</td>
      <td class="footerya">查看全部>&nbsp;&nbsp;</td>
      <td class="footerya">查看全部>&nbsp;&nbsp;</td>
    </tr>
    `
    document.querySelector('table').innerHTML= strya3
  })

        const btnBackToTop = document.querySelector('.backToTop');
        console.log(btnBackToTop);

        window.addEventListener('scroll', function(){
            if(window.scrollY > 200){
                btnBackToTop.style.display = 'block';
            }else{
                btnBackToTop.style.display = 'none';
            }
        });

        btnBackToTop.addEventListener('click',function(){
            window.scrollTo({
                top: 0,
                behavior: 'smooth',
            })
        });

</script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="ranklist.js"></script>
<script>
axios.defaults.baseURL='http://e6dz54.natappfree.cc'
  // 获取接口数据并初始化轮播图
  axios.get('/home/head')
      .then(response => {
          const images = response.data.data;
          initCarousel(images);
      })
      .catch(error => {
          console.error('接口请求失败:', error);
          document.querySelector('.loading').textContent = '图片加载失败';
      });

  function initCarousel(images) {
      const imglist = document.querySelector('.imglist');
      const btnlist = document.querySelector('.btnlist');
      
      // 清空初始内容
      imglist.innerHTML = '';
      btnlist.innerHTML = '';

      // 动态生成图片元素
      images.forEach((imgUrl, index) => {
          const imgItem = document.createElement('a');
          imgItem.innerHTML = `<img src="${imgUrl}" alt="轮播图${index + 1}">`;
          imgItem.style.display = index === 0 ? 'block' : 'none';
          imglist.appendChild(imgItem);

          // 动态生成圆点按钮
          const dot = document.createElement('span');
          dot.className = index === 0 ? 'che' : '';
          dot.addEventListener('click', () => handleDotClick(index));
          btnlist.appendChild(dot);
      });

      // 轮播控制逻辑
      let currentIndex = 0;
      const items = document.querySelectorAll('.imglist a');
      const dots = document.querySelectorAll('.btnlist span');
      let timer = setInterval(autoPlay, 3000);

      function updateDisplay(index) {
          items.forEach(item => item.style.display = 'none');
          dots.forEach(dot => dot.classList.remove('che'));
          items[index].style.display = 'block';
          dots[index].classList.add('che');
      }

      function autoPlay() {
          currentIndex = (currentIndex + 1) % items.length;
          updateDisplay(currentIndex);
      }

      function handleDotClick(index) {
          clearInterval(timer);
          currentIndex = index;
          updateDisplay(currentIndex);
          timer = setInterval(autoPlay, 3000);
      }

      // 箭头控制
      document.querySelector('.leftbtn').addEventListener('click', () => {
          clearInterval(timer);
          currentIndex = (currentIndex - 1 + items.length) % items.length;
          updateDisplay(currentIndex);
          timer = setInterval(autoPlay, 3000);
      });

      document.querySelector('.rightbtn').addEventListener('click', () => {
          clearInterval(timer);
          currentIndex = (currentIndex + 1) % items.length;
          updateDisplay(currentIndex);
          timer = setInterval(autoPlay, 3000);
      });

      // 移除加载提示
      document.querySelector('.loading').remove();
  }
</script>
<script>

  const API_BASE = `${baseURL}`;
  const searchInput = document.getElementById('searchInput');
  const resultsContainer = document.getElementById('searchResults');

  // 防抖函数，减少请求频率
  function debounce(fn, delay = 500) {
      let timer;
      return function() {
          clearTimeout(timer);
          timer = setTimeout(() => fn.apply(this, arguments), delay);
      }
  }

  // 执行搜索
  async function performSearch(keyword) {
      if (!keyword.trim()) {
          resultsContainer.innerHTML = '';
          return;
      }

      try {
          const response = await fetch(`${API_BASE}/search?s=${encodeURIComponent(keyword)}`);
          const { code, data, msg } = await response.json();
          
          if (code === 0 && data) {
              renderResults(data);
          } else {
              resultsContainer.innerHTML = `<div class="result-item error">${msg || '搜索失败'}</div>`;
          }
      } catch (error) {
          resultsContainer.innerHTML = `<div class="result-item error">网络请求失败</div>`;
      }
  }

  // 渲染结果
  function renderResults(results) {
      resultsContainer.innerHTML = results.map(item => `
          <div class="result-item">
              <div class="song-name">${item.name}</div>
              <div class="song-info">歌手：${item.author} | 专辑：${item.album}</div>
          </div>
      `).join('');
  }

  // 事件监听（防抖处理）
  searchInput.addEventListener('input', debounce(e => {
      performSearch(e.target.value);
  }));
</script>
</body>
</html>